<template>
	<view class="list">
		<view class="course" :class="{'course-top-bottom':topBottom,'course-left-right':leftRight}" v-for="course in courses" :key="course.id" @click="videoRouter(course)">
			<view class="img">
				<image class="image" :src="utils.picPath(course.picUrl)"></image>
			</view>
			<view class="info">
				<view class="title">{{course.title}}</view>
				<view class="type">
					<text class="name">{{course.type == 1 ? '系列课程' : '单列课程'}}</text> 
					<text class="number" v-if="course.type == 1 && course.number">| 共{{course.number}}节</text> 
				</view>
				<view class="bottom">
					<view :class="{'ios-hide':platform== platformHide}">
						<view class="price free" v-if="course.price == '0.00'">免费</view>
						<view class="price" v-else>￥{{course.price}}</view>
					</view>
					<view class="view flex-box">
						
						
						<text class="num">{{course.view}}</text>
					</view>
				</view> 
			</view>
		</view>      
	</view>
</template>

<script>

export default {
	name:'myCourse',
	props:{
		// 课程的详细信息
		courses:{
			type:Array
		},
		topBottom:{
			type:Boolean
		},
		leftRight:{
			type:Boolean
		}
	},
	computed:{
		
	},
	methods:{
		videoRouter(course) {
			// console.log(course);
			let type = course.type
			// console.log(type);
			if(type == '1') {
				this.$router.push({
					route:this.$routesConfig.videoDetailVs,
					query:{
						id:course.id
					}
				})
			} else if(type == '2') {
				this.$router.push({
					route:this.$routesConfig.videoDetailVd,
					query:{
						id:course.id
					}
				})
			}
		}
	}

}
</script>

<style lang="less" scoped>
	.list{
		display:flex;
		justify-content: space-between;
		flex-flow:row wrap;
		padding:20rpx 12rpx;
		padding-bottom:0;
		.course{
			overflow: hidden;
			&.course-top-bottom {
				width:336rpx;
				border-radius: 16rpx;
				box-shadow: 6rpx 6rpx 6rpx rgba(0,0,0,0.16);
				margin-bottom:30rpx;
				.img{
					width:100%;
					height:200rpx;
					.image{
						width:100%;
						height:100%;
					}
				}
				.info{
					padding:25rpx 10rpx;
					box-sizing: border-box;
					height:210rpx;
					display: flex;
					flex-flow:column nowrap;
					justify-content: space-between;
					.title{
						font-size:24rpx;
						line-height: 1.5em;
						font-weight: 600;
						color:#000;
						color:#333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.type{
						font-size:24rpx;
						color:#666;
						margin-top: 10rpx;
						.name{
							margin-right:8rpx;
						}
						.number{
							margin-left: 8rpx;
						}
					}
					.bottom{
						display:flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 10rpx;
						.price{
							font-size:32rpx;
							color:#ff0000;
							&.free{
								color:green;
							}
						}
						.view{
							font-size:20rpx;
							.num{
								margin-left: 6rpx;
							}
						}
					}
				}
			}
			&.course-left-right{
				display:flex;
				width:100%;
				box-sizing: border-box;
				flex-flow:row nowrap;
				justify-content: space-between;
				align-items: center;
				padding:20rpx 0;
				border-bottom:2rpx solid #f5f5f5;
				.img{
					width:280rpx;
					height:160rpx;
					border-radius: 16rpx;
					// border:1px solid red;
					overflow: hidden;
					.image{
						width:100%;
						height:100%;
					}
				}
				.info{
					flex:1;
					display:flex;
					flex-flow:column nowrap;
					justify-content: space-between;
					margin-left: 16rpx;
					height:160rpx;
					.title{
						font-size:25rpx;
						line-height: 1.5em;
						font-weight: 600;
						color:#333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.type{
						font-size:24rpx;
						color:#666;
						margin-top: 10rpx;
						.name{
							margin-right:8rpx;
						}
						.number{
							margin-left: 8rpx;
						}
					}
					.bottom{
						display:flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 10rpx;
						.price{
							font-size:32rpx;
							color:#ff0000;
							&.free{
								color:green;
							}
						}
						.view{
							font-size:22rpx;
							margin-right:10rpx;
							color:#999;
							.num{
								margin-left: 6rpx;
							}
						}
					}
				}
			}
		}
	}
	
</style>